<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>导航</title>
    <link rel="stylesheet" href="css/base.css">
    <style type="text/css">
		.awords{
			width: 40px;
			height: 100%;
			background: #222;
			position: fixed;
			top: 0; 
			right: 0;
			z-index: 10000;
			padding-top: 120px;
			box-sizing: border-box;
			text-align: center;
			transition: 0.4s;
		}
		.awords.on{ right: -40px;}
		.awords ul li{
			width: 40px;
			height: 40px;
			line-height: 36px;
			position: relative;
			transition: 0.2s;
		}
		.awords ul li a{height: 100%;display: block;}
		.awords ul li a img{ vertical-align: middle;}
		.awords ul li:hover{ background: #268cf4;}
		.awords ul li.imqq{height: auto;}
		.awords ul li.imqq{
			margin-bottom: 20px;
			padding: 10px 0;
			line-height: 1;
		}
		.awords ul li.imqq em{
			display: block;
			font-size: 14px;
			font-style: normal;
			line-height: 18px;
			color: #fff;
		}
		.awords ul li.imqq img{ line-height: 1; margin-bottom: 5px;}
		.awords ul li.redbag{
			margin-top: 10px;
			padding: 10px 0;
			height: auto;
			line-height: 1;
			cursor: pointer;
		}
		.awords ul li.redbag img{width: 25px;}
		.awords ul li.redbag:hover{background: none;}
		.awords ul li.redbag:hover img{
			-webkit-animation: redBag 1.3s linear 1;
			-moz-animation: redBag 1.3s linear 1;
			-ms-animation: redBag 1.3s linear 1;
			-o-animation: redBag 1.3s linear 1;
			animation: redBag 1.3s linear 1;
		}
		@-webkit-keyframes redBag{
			0%{width: 25px;}
			20%{width: 35px;}
			30%{width: 25px;}
			45%{width: 32px;}
			60%{width: 25px;}
			80%{width: 30px;}
			100%{width: 25px;}
		}
		@-moz-keyframes redBag{
			0%{width: 25px;}
			20%{width: 35px;}
			30%{width: 25px;}
			45%{width: 32px;}
			60%{width: 25px;}
			80%{width: 30px;}
			100%{width: 25px;}
		}
		@-ms-keyframes redBag{
			0%{width: 25px;}
			20%{width: 35px;}
			30%{width: 25px;}
			45%{width: 32px;}
			60%{width: 25px;}
			80%{width: 30px;}
			100%{width: 25px;}
		}
		@-o-keyframes redBag{
			0%{width: 25px;}
			20%{width: 35px;}
			30%{width: 25px;}
			45%{width: 32px;}
			60%{width: 25px;}
			80%{width: 30px;}
			100%{width: 25px;}
		}
		@keyframes redBag{
			0%{width: 25px;}
			20%{width: 35px;}
			30%{width: 25px;}
			45%{width: 32px;}
			60%{width: 25px;}
			80%{width: 30px;}
			100%{width: 25px;}
		}
		.awords ul li:hover .awords-tip{opacity: 1;right: 55px;}
		.awords-tip{
			padding: 12px 20px;
			background: #222;
			position: absolute;
			top: 2px;
			right: -212px;
			transition: 0.4s;
			z-index: -1;
		}
		.awords-tip:after{
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid #222;
			border-top: 5px solid transparent;
			border-bottom: 5px solid transparent;
			position: absolute;
			top: 12px;
			right: -10px;
		}
		.awords-tip p{
			font-size: 14px;
			line-height: 1;
			color: #fff;
		}
		.awords .phone .awords-tip{width: 172px;}
		.awords-phone{
			display: inline-block;
			width: 16px;
			height: 18px;
			vertical-align: middle;
			background: url("img/phobe.png") no-repeat;
			background-size: 100% 100%;
		}
		.awords .qrcode .awords-tip{
			top: -60px;
			width: 122px;
			padding: 12px;
		}
		.awords .qrcode .awords-tip:after{ top: 75px;}
		.awords .qrcode .awords-tip p{margin-top: 8px;}
		.awords .service .awords-tip{width: 95px;}
		.awords .developer .awords-tip{width: 70px;}
		.awords .backindex .awords-tip{width: 56px;}
		.awords .backtop .awords-tip{width: 56px;}
		.awords-index{
			display: inline-block;
			width: 26px;
			height: 22px;
			vertical-align: middle;
			background: url("img/1-2_03.png") no-repeat;
			background-size: 100% 100%;
		}
		.awords .backtop{
			position: absolute;
			left: 0;
			bottom: 5px;
		}
		.awords-move{
			width: 122px;
			height: 122px;
			position:relative;
		}
		.awords-move img{
			display: block;
			width: 100%;
			height: 100%;
		}
		.awords-move .footer-line {
			width: 100%;
			height: 0;
			border-bottom: 2px solid #268cf4;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(38, 140, 244, 0.2);
			-webkit-animation: move 5s linear infinite; 
			-moz-animation: move 5s linear infinite; 
			-ms-animation: move 5s linear infinite; 
			-o-animation: move 5s linear infinite; 
			animation: move 5s linear infinite;
		}
		@-webkit-keyframes move{ from {height: 0;} to {height: 108px;}} 
		@-moz-keyframes move{ from {height: 0;} to {height: 108px;}} 
		@-ms-keyframes move{ from {height: 0;} to {height: 108px;}}
		@-o-keyframes move{ from {height: 0;} to {height: 108px;}}
		@keyframes move{ from {height: 0;} to {height: 108px;}} 
		.awords-shrink{
			display: block;
			width: 16px;
			height: 115px;
			background: #222;
			position: absolute;
			top: 120px;
			right: 40px;
			cursor: pointer;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			line-height: 115px;
			vertical-align: middle;
			text-align: center;
		}
		.awords-shrink img{
			display: inline-block;
			width: 16px;
			height: 16px;
			vertical-align: middle;
		}
		.awords.on .awords-shrink img{transform: rotate(180deg);}
	</style>
</head>
<body>
	<div class="awords">
		<ul>
			<li id="wap_qq" class="imqq" title="在线QQ客服"> 
				<a href="javascript:;">
					<img src="img/qq.png" alt="qq"/>
					<em>立</em><em>即</em><em>咨</em><em>询</em>
				</a>
			</li>
			<li class="phone">
				<a href="javascript:;">
					<div class="awords-phone"></div>
				</a>
				<div class="awords-tip">
					<p>咨询热线：400-039-9386</p>
				</div>
			</li>
			<li class="qrcode">
				<a href="javascript:;">
					<img src="img/wx.png" alt="未找到图片"/>
				</a>
				<div class="awords-tip">
					<div class="awords-move">
						<img src="img/gfwx_03.jpg" alt="千享科技二维码"/>
						<div class="footer-line"></div>
					</div>
					<p>关注千享官方微信</p>
				</div>
			</li>  
			<li class='backindex'>
				<a href="/">
					<div class="awords-index"></div>
				</a>
				<div class="awords-tip">
					<p>返回首页</p>
				</div>
			</li>
			<li class="backtop">
				<a href="javascript:;">
					<img src="img/ftop_11.png" alt="未找到图片"/>
				</a>
				<div class="awords-tip">
					<p>返回顶部</p>
				</div>
			</li>
		</ul>
		<div class="awords-shrink" title="展开菜单"><img src="img/gbb_03.jpg" alt="千享科技菜单栏"/></div>
	</div>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" async="async">
		$(function(){			   
			//返回顶部
			$('.backtop').on('click',function(){
				$('html, body').stop().animate({scrollTop:0}, 'slow');
			});

			//菜单展开收缩
			$('.awords-shrink').on('click',function(){
				$('.awords').toggleClass('on');
			});			

		});
		$(function() {
		    var num = 0;
		    function goLeft() {
		        //750是根据你给的尺寸，可变的
		        if (num == -3500) {
		            num = 0;
		        }
		        num -= 1;
		        $(".scroll").css({
		            left: num
		        })
		    }
		    //设置滚动速度
		    var timer = setInterval(goLeft, 20);
		    //设置鼠标经过时滚动停止
		    $(".top-l").hover(function() {
		        clearInterval(timer);
		    },
		    function() {
		        timer = setInterval(goLeft, 20);
		    })
		})
	</script>
</body>
</html>











